<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="favicon.ico">
    <title>控制台</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/pagination.css"/>
    <script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="jquery/jquery.pagination.js"></script>
    <script type="text/javascript" src="script/docs.min.js"></script>
    <script type="text/javascript" src="script/back-to-top.js"></script>
    <script type="text/javascript">
        $(function () {
            initPagination();
        });

        //生成分页导航条函数
        function initPagination() {
            //获取总记录数
            var totalRecord = ${requestScope.pageInfo.total};
            var properties = {
                num_edge_entries: 3, //边缘页数
                num_display_entries: 5, //主体页数
                callback: pageselectCallback,
                items_per_page:${requestScope.pageInfo.pageSize}, //每页显示1项
                current_page: ${requestScope.pageInfo.pageNum - 1},//Pagination内部使用pageIndex来管理页面
                prev_text: "上一页",
                next_text: "下一页"
            }
            // 生成页码导航条
            $("#Pagination").pagination(totalRecord, properties);

        }

        //pageIndex 0-
        function pageselectCallback(pageIndex, jQuery) {
            //根据pageIndex计算pageNum
            var pageNum = pageIndex + 1;
            //跳转页面
            window.location.href = "getAllGoodsMutiFunction?pageNum=" + pageNum + "&tid=${param.tid}" + "&gname=${param.gname}";
            //由于每个按钮都是超链接，所以这里取消超链接的默认行为
            //alert('aaaaaaaaaa')
            return false

        }

    </script>
</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed"
                    data-toggle="collapse" data-target="#navbar" aria-expanded="false"
                    aria-controls="navbar">
                <span class="sr-only"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#" style="color: lawngreen">
                <i class="glyphicon glyphicon-user"></i>${adminInfo.adminName}
            </a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="getAllTypeGoods">首页</a></li>
                <li><a href="#">second</a></li>
                <li><a href="#">third</a></li>
                <li><a href="adminLogout">退出</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar" id="select">
                <li class="active flag"><a href="getAllGoodsMutiFunction">商品管理</a></li>
                <li class="flag"><a href="getAllTypes">商品分类管理</a></li>
                <li class="flag"><a href="getAllUserInfo">用户信息</a></li>
                <li class="flag"><a href="#">展示</a></li>
            </ul>
        </div>
        <script>
            $(function () {
                $("#select .flag").click(function () {
                    $("#select .flag").removeClass("active");
                    $(this).addClass("active");
                })
            })
        </script>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title" align="center">
                        <i class="glyphicon glyphicon-th"></i> 白给店铺控制台
                    </h3>
                </div>
                <div class="panel-body">
                    <form action="getAllGoodsMutiFunction" method="post" class="form-inline" role="form"
                          style="float: left;">
                        <div class="form-group has-feedback">
                            <div class="input-group">
                                <div class="input-group-addon">商品分类</div>
                                <select id="tid3"
                                        class="form-control" name="tid">
                                    <option value="0">请选择商品类型</option>
                                </select>
                            </div>
                            <div class="input-group">
                                <div class="input-group-addon">商品名称</div>
                                <input name="gname" class="form-control has-success" type="text"
                                       placeholder="请输入商品名称关键字">
                            </div>
                        </div>
                        <button type="submit" class="btn btn-warning">
                            <i class="glyphicon glyphicon-search"></i> 查询
                        </button>
                    </form>
                    <br>
                    <hr style="clear: both;">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>商品编号</th>
                                <th>商品名称</th>
                                <th>商品价格</th>
                                <th>库存</th>
                                <th>商品类型</th>
                                <th width="20%">操作
                                    <button class="btn btn-success" data-toggle="modal"
                                            data-target="#myAdd" add="0">添加
                                    </button>
                                </th>
                            </tr>
                            </thead>
                            <tbody>
                            <c:forEach items="${pageInfo.list}" var="g">
                                <tr>
                                    <td>${g.gid}</td>
                                    <td>${g.gname}</td>
                                    <td>${g.price}</td>
                                    <td>${g.storenum}</td>
                                    <td>${g.tname}</td>
                                    <td>
                                        <button class="btn btn-primary " data-toggle="modal"
                                                data-target="#myModal" other="${g.gid}">修改
                                        </button>

                                        <button class="btn btn-info  " data-toggle="modal"
                                                data-target="#myUpload" record="${g.gid}"> 图片
                                        </button>

                                        <a href="deleteGoodsById?id=${g.gid}" class="btn btn-danger">删除</a>
                                    </td>
                                </tr>
                            </c:forEach>
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="6" align="center">
                                    <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
                                </td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- 上传 -->
<div class="modal fade" id="myUpload" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">商品图片上传</h4>
            </div>
            <div class="modal-body">
                <form action="uploadFile" method="post" enctype="multipart/form-data" id="upload">
                    <div class="input-group">
                        <span class="input-group-addon">商品ID</span>
                        <span id="tishi"class="input-group-addon"></span>
                        <input type="hidden" class="form-control" name="gid">
                    </div>
                    <div class="col-sm-10">
                        <%--style="display: none;"--%>
                        <input type="file" name="picture" style="display: none;"/>
                        <button type="button" id="uploadBtn"
                                class="btn btn-primary btn-lg active">选择上传图片
                        </button>
                        <label class="control-label">支持jpg、jpeg、png、gif格式，大小不超过2M，建议尺寸：300*200px选择文件</label>
                        <br/>
                        <img alt="" src="" width="300px" height="200px" style="display: none"/>
                    </div>

                    <div class="input-group">
                        <input style="color: red;" type="submit" class="form-control" value="确定上传">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">修改页面</h4>
            </div>
            <div class="modal-body">
                <form action="" method="post" id="update">
                    <div class="input-group">
                        <span class="input-group-addon">商品名称</span>
                        <input type="text" class="form-control" name="gname">
                    </div>

                    <div class="input-group">
                        <span class="input-group-addon">商品价格</span>
                        <input type="text" class="form-control" name="price">
                    </div>

                    <div class="input-group">
                        <span class="input-group-addon">商品库存</span>
                        <input type="text" class="form-control" name="storenum">
                    </div>

                    <div class="input-group">
                        <span class="input-group-addon">商品类型</span>
                        <select id="tid" class="form-control" name="tid">
                            <option value="0">请选择商品类型</option>
                        </select>
                    </div>

                    <div class="input-group">
                        <input type="submit" class="form-control" value="修改">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myAdd" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myAddLabel">添加页面</h4>
            </div>
            <div class="modal-body">
                <form action="update" method="post" id="add">
                    <div class="input-group">
                        <span class="input-group-addon">商品名称</span>
                        <input type="text" class="form-control" name="gname">
                    </div>

                    <div class="input-group">
                        <span class="input-group-addon">商品价格</span>
                        <input type="text" class="form-control" name="price">
                    </div>

                    <div class="input-group">
                        <span class="input-group-addon">商品库存</span>
                        <input type="text" class="form-control" name="storenum">
                    </div>

                    <div class="input-group">
                        <span class="input-group-addon">商品类型</span>
                        <select id="tid2" class="form-control" name="tid">
                            <option value="0">请选择商品类型</option>
                        </select>
                    </div>

                    <div class="input-group">
                        <input type="submit" class="form-control" value="添加">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $.post("queryTypeAll", function (data) {
            var str = "";
            for (var i in data) {
                str += "<option value='" + data[i].tid + "'>" + data[i].tname
                    + "</option>"
            }
            $("#tid").append(str);
            $("#tid2").append(str);
            $("#tid3").append(str);
        }, "json");
        $("button[other]").click(function () {
            var id = $(this).attr('other')
            console.log(id);
            $.post("queryGoodsById", {
                id: id
            }, function (data) {
                console.log(data);
                $("#update input[name='gname']").val(data.gname);
                $("#update input[name='price']").val(data.price);
                $("#update input[name='storenum']").val(data.storenum);
                $("#update select[name='tid']").val(data.tid);
            }, "json");
            var path = "update?gid=" + id;
            $("#update").attr("action", path);
        });

        //-------------------图片上传处理-----------------------

        $("button[record]").click(function () {
            var gid = $(this).attr('record');
            $("#upload input[name='gid']").val(gid)
            $("#tishi").text(gid);
            console.log(gid);
        });

        $("#uploadBtn").click(function () {
            $("[name=picture]").click();
        });

        $("[name=picture]").change(function (event) {

            var file = event.target.files[0];

            var url = window.url || window.webkitURL;

            var path = url.createObjectURL(file);

            $(this).next().next().next().next().attr("src", path).show();
        })
    })
</script>
</body>
</html>
